<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../css/common/reset.css">
    <link rel="stylesheet" type="text/css" href="../../css/register/index.css">

</head>
<body>

    <div class=" biaodan">
        <form class="form">
            <ul>
                <li class="user record">
                    <input type="text" id="text" placeholder="请输入SIM号或手机号"  >
                    <a id="search">查询</a>
                    <p class="text">充值历史</p>
                </li>
            </ul>
        </form>
        <div class="no_record" >
            <p>暂无记录</p>
        </div>
        <ul class="list" style="display: none">
            <li>
                <p class="text">2017年6月</p>
                <ul class="record_ul">
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <p class="text">2017年5月</p>
                <ul class="record_ul">
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>

                    </li>
                    <li class="record_list">
                        <div class="right">
                            - 8.00
                        </div>
                        <img src="../../image/flow.png" alt="">
                        <div class="center">
                            <p>微信支付 - 流量充值300M</p>
                            <p class="time">06-18 08:34</p>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="is_loading" style="display: none">
        <img src=".../..//image/loadingImg.gif" alt="">
    </div>
    <div class="modal">
    <div class="input_prompt">
        <div class="title">
            <span>信息</span>
            <img src="../../image/close.png" alt="" class="close">
        </div>
        <div class="weep">
            <img src="../../image/weep.png" alt="">
            <span>备卡号信息不存在</span>
        </div>
        <div class="btn close">确定</div>
    </div>
</div>
<script type="text/javascript" src="../../js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        var text = $('.list').html()
        var isLoading =  $('.is_loading')
        var isEnd = false
        var getList = function(){
            if(isEnd ){
                isLoading.css({
                    transform:'scale(0)',
                    display:'none'
                })
                return
            }
            $.ajax({
                type:'get',
                url:'',
                dataType:'json',
                success:function(result){
                    if(result.code === '200'){
                        isEnd = result.page === page
                        page++
                    }
                },
                error:function(){

                }
            })
            setTimeout(function(){
                isEnd = true
            },3000)
        }

        //上滑加载
        var screenHeight = window.screen.height
           window.onscroll = function(){
               if(screenHeight + document.body.scrollTop >= document.body.scrollHeight){
                   isLoading.css({
                       display:'block',
                       transform:'scale(1)'
                   })
                   setTimeout(function(){
                       getList()
                       $('.list').html(text+text)

                   },1000)
               }
               if(isEnd){
                   isLoading.css({
                       display:'none',
                       transform:'scale(0)'
                   })
               }
           }
        var modal = $('.modal')
        $('#search').click(function(){
            var inputValue = $('#text').val()
            if(!inputValue){
                modal.fadeIn().show()
                $('.no_record').fadeIn().show()
                $('.list').hide()
            }else{
                modal.hide()
                $('.no_record').hide()
                //请求的数据
                getList()
                $('.list').fadeIn().show()
            }
        })
        $('.close').click(function(){
            modal.hide()
        })
    })
</script>
</body>

</html>
